<template>
  <div class="edit-menu">
    <el-dialog title="修改菜单" :visible.sync="editMenuSync" :before-close="handleCloseDialog" width="45%"
    >
      <el-card shadow="never">
        <div class="edit-menu-body">
          <el-form label-width="100px" :model="editMenuData" ref="editMenuForm" :rules="editMenuRule">
            <el-form-item label="菜单标题:" prop="title">
              <el-input v-model="editMenuData.title" class="edit-menu-input" clearable></el-input>
            </el-form-item>
            <el-form-item label="菜单路径：" prop="path">
              <el-input v-model="editMenuData.path" class="edit-menu-input" clearable></el-input>
            </el-form-item>
            <el-form-item label="菜单图标：" prop="icon">
              <e-icon-picker v-model="editMenuData.icon" :width="222" class="edit-menu-input"/>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <div class="dialog-footer">
        <el-button @click="handleCloseDialog">取 消</el-button>
        <el-button type="primary" @click="handleEditMenu">确认修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import store from '@/store'
import { GetMenuByIdApi, UpdateMenuApi } from '@/request/menu/menu-api'
import { validateMenuPath } from '@/utils/validate/menu-validate'

export default {
  computed: {
    listenEditMenuId () {
      return store.state.MenuEdit.editMenuId
    },
    ...mapState({
      editMenuId: state => state.MenuEdit.editMenuId,
      editMenuSync: state => state.MenuEdit.editMenuSync
    })
  },
  data () {
    return {
      editMenuData: {
        'id': null,
        'icon': null,
        'path': null,
        'title': null
      },
      editMenuRule: {
        title: {
          required: true,
          message: '请输入菜单标题',
          trigger: 'blur'
        },
        path: {
          validator: validateMenuPath,
          trigger: 'change'
        },
        icon: {
          required: true,
          message: '请选泽菜单图标',
          trigger: 'blur'
        },
      }
    }
  },
  watch: {
    listenEditMenuId: {
      immediate: true,
      handler (val, oldval) {
        if (val) {
          this.init(val)
        }
      }
    }
  },
  methods: {
    async init () {
      let res = await GetMenuByIdApi(this.editMenuId)
      if (res.code === 200) {
        this.editMenuData.id = this.editMenuId
        this.editMenuData.icon = res.data.icon
        this.editMenuData.path = res.data.path
        this.editMenuData.title = res.data.title
      }
    },
    close () {
      store.commit('MenuEdit/changeEditMenuSync', false)
      store.commit('MenuEdit/changeEditMenuId', null)
      this.editMenuData = {
        'icon': null,
        'path': null,
        'title': null
      }
      //取消单项验证
      this.$nextTick(() => {
        this.$refs['editMenuForm'].clearValidate()
      })
    },
    handleCloseDialog () {
      this.$confirm('确定取消添加菜单吗？', '提示', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'info'
      }).then(() => {
        this.close()
      }).catch((e) => {
        if (e === 'cancel') {
        }
      })
    },handleEditMenu () {
      this.$refs.editMenuForm.validate(valid => {
        if (!valid) {
          this.$message.error('存在错误内容，请完善信息！')
          return false
        } else {
          this.$confirm('确定修改该菜单信息吗？', '提示',
              {
                'confirmButtonText': '确定',
                'cancelButtonText': '取消',
                'type': 'warning'
              }).then(async () => {
            let res =await UpdateMenuApi(this.editMenuData)
            if (res.code === 200) {
              this.$message.success('修改菜单成功！')
              this.close()
              this.$parent.refreshPage()
            }
          })
        }
      })
    }
  }

}
</script>
<style scoped lang="less">
.edit-menu {
  .el-dialog {
    .el-card {
      width: 70%;
      margin: 0 auto;

      .edit-menu-body {
        width: 80%;
        margin: 10px 20px;

        .el-input {
          width: 240px;
        }
      }
    }

    .dialog-footer {
      margin: 0 auto;
      padding: 20px 20px;
      max-width: 200px;
    }
  }
}

/deep/ .el-dialog {
  border-radius: 10px;
}

/deep/ .ui-fas {
  width: 240px;
}
</style>
